// 标签设置
import React, { useState } from 'react';
import { Switch, Input } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const ScatterLabelSetting = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic' ];
	const [ isShowLabelData, setIsShowLabelData ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowLabelData' ) ? config.style.isShowLabelData : true
	);
	const [ isShowLabelText, setIsShowLabelText ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowLabelText' ) ? config.style.isShowLabelText : true
	);

	const onChange = ( checked: boolean, name: string, cb: any ) => {
		cb && cb();
		form.setFieldsValue( { [name]: checked } );
		onValuesChange( config.type, config.key, { [name]: checked }, 'style' );
	};

	const onBlur = ( value: any, name: string ) => {
		onValuesChange( config.type, config.key, { [name]: form.getFieldsValue()[name] }, 'style' );
	};


	return (
		<div>
			<FormItem label="是否显示数据" name="isShowLabelData" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch
					checked={isShowLabelData}
					onChange={( checked ) => onChange( checked, 'isShowLabelData', setIsShowLabelData( checked ) )}
				></Switch>
			</FormItem>
			{isShowLabelData && (
				<>
					<FormItem label="标签字体" name="chartLabelFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<Editor
							config={config}
							form={form}
							onValuesChange={onValuesChange}
							fontFamilyName="labelFontFamily"
							fontSizeName="labelFontSize"
							fontColorName="labelFontColor"
							boldName="labelFontBold"
							italicName="labelFontItalic"
							fontConfig={fontConfig}
						/>
					</FormItem>
				</>
			)}
			<FormItem label="是否显示文本" name="isShowLabelText" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch
					checked={isShowLabelText}
					onChange={( checked ) => onChange( checked, 'isShowLabelText', setIsShowLabelText( checked ) )}
				></Switch>
			</FormItem>
			{isShowLabelText && (
				<FormItem label="文本内容" name="chartCustomText" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
					<Input
						onBlur={( value ) => onBlur( value, 'chartCustomText' )}
						onPressEnter={( value ) => onBlur( value, 'chartCustomText' )}
						style={{ width: '100%' }}
						maxLength={20}
						placeholder="Enter生效"
					></Input>
				</FormItem>
			)}
			
		
		</div>
	);
};

export default React.memo( ScatterLabelSetting );
